/**
 * 需求: 获取所有分类数据并同时渲染到页面上
 *  1. 获取一级商品分类
 *  2. 获取所有二级商品分类 根据id来获取
 *  3. 渲染数据
 * */
async function fn () {
  /* 一级数据 */
  const res = await axios.get('http://hmajax.itheima.net/api/category/top')
  console.log(res, 123);
  /* 获取二级请求Promise对象 */
  const pArr = res.data.data.map(item => {
    return axios('http://hmajax.itheima.net/api/category/sub?id=' + item.id)
  })
  // console.log(pArr, 99);
  /* 获取二级数据 */
  const p = Promise.all(pArr)
  p.then(res2 => {
    console.log(res2, 22);//二级的数据
    const htmlStr = res2.map(item2 => {
      const { name, children } = item2.data.data
      return `
      <div class="item">
      <h3>${name}</h3>
      <ul>
      ${children.map(item3 => {
        return `
        <li>
          <a href="javascript:;">
            <img src="${item3.picture}" />
            <p>${item3.name}</p>
          </a>
        </li>`
      }).join(' ')}
      </ul>
    </div>
      `
    })

    document.querySelector('.sub-list').innerHTML = htmlStr.join(' ')
  })

}
fn()
